<template>
  <el-drawer v-model="isShowDrawer" custom-class="drawer" size="90%" :destroy-on-close="true" @closed="onClosed">
    <template #header>
      <h4 class="drawer-header">选择教师(先选择教师再添加)</h4>
    </template>
    <template #default>
      <globle-linear-border>
        <el-card class="searchBox">
          <el-form :inline="true">
            <el-form-item label="姓名">
              <el-input v-model="pageQuery.otherParams.name" placeholder="输入教师姓名搜索" clearable />
            </el-form-item>
            <el-form-item label="工号">
              <el-input v-model="pageQuery.otherParams.workId" placeholder="输入教师工号搜索" clearable />
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="pageQuery.otherParams.sex" placeholder="选择教师性别搜索" clearable>
                <el-option label="男" value="1" />
                <el-option label="女" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否为管理员">
              <el-select v-model="pageQuery.otherParams.isAdmin" placeholder="选择是否为管理员搜索" clearable>
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
      </globle-linear-border>

      <!-- 已选择的教师 -->
      <globle-linear-border style="margin-top: 20px">
        <el-card class="mainBox">
          <article>您选择的教师</article>
          <el-table v-if="chooseList.length" :border="true" stripe :data="chooseList" cell-class-name="table-cell"
            header-cell-class-name="table-header-cell">

            <el-table-column property="workId" label="工号" show-overflow-tooltip />
            <el-table-column property="name" label="姓名" />
            <el-table-column label="性别">
              <template #default="scope">{{ scope.row.sex === 1 ? '男' : '女' }}</template>
            </el-table-column>
            <el-table-column property="qq" label="QQ号" width="150" />
            <el-table-column property="phone" label="手机号" width="160" />
            <el-table-column property="identityId" label="身份证号" width="220" />
            <el-table-column label="是否为管理员">
              <template #default="scope">
                <el-tag effect="dark" type="success" v-if="scope.row.isAdmin == 1">是</el-tag>
                <el-tag effect="dark" type="danger" v-else>否</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template #default="scope">
                <el-tag effect="dark" type="danger" v-if="scope.row.isResigned == 1">辞职</el-tag>
                <el-tag effect="dark" type="success" v-else>在职</el-tag>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                  <el-button type="danger" size="small" icon="Delete" @click="onCancelSelect">取消选择</el-button>
                </template>
              </el-table-column>
          </el-table>
        </el-card>
      </globle-linear-border>

      <!-- 全部教师表格 -->
      <globle-linear-border style="margin-top: 20px">
        <el-card class="mainBox">
          <span v-if="tableData.rows">
            <el-table :border="true" stripe ref="tableRef" :data="tableData.rows" cell-class-name="table-cell"
              header-cell-class-name="table-header-cell">
              <!-- <el-table-column type="selection" width="55" /> -->
              <el-table-column property="workId" label="工号" show-overflow-tooltip />
              <el-table-column property="name" label="姓名" />
              <el-table-column label="性别">
                <template #default="scope">{{ scope.row.sex === 1 ? '男' : '女' }}</template>
              </el-table-column>
              <el-table-column property="qq" label="QQ号" width="150" />
              <el-table-column property="phone" label="手机号" width="160" />
              <el-table-column property="identityId" label="身份证号" width="220" />
              <el-table-column label="是否为管理员">
                <template #default="scope">
                  <el-tag effect="dark" type="success" v-if="scope.row.isAdmin == 1">是</el-tag>
                  <el-tag effect="dark" type="danger" v-else>否</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="状态">
                <template #default="scope">
                  <el-tag effect="dark" type="danger" v-if="scope.row.isResigned == 1">辞职</el-tag>
                  <el-tag effect="dark" type="success" v-else>在职</el-tag>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                  <el-button type="success" size="small" icon="Select" @click="onSelect(scope.row)">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination v-model:currentPage="pageQuery.pageParams.pageNum"
              v-model:page-size="pageQuery.pageParams.pageSize" :page-sizes="pageSizeOption" :background="true"
              :small="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.totalSize"
              @size-change="onSizeChange" @current-change="onCurrentChange" />
          </span>
        </el-card>
      </globle-linear-border>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="isShowDrawer = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">下一步</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElMessage, ElTable } from 'element-plus';
import { IPageRes, ITch, ITchPageParams } from '../../../../type';
import { useAPI } from '../../../../request/api';

const api = useAPI();
const tableRef = ref<InstanceType<typeof ElTable>>();
const tableData = ref({} as IPageRes);
const isShowDrawer = ref<boolean>(false);
const chooseList = ref({} as ITch[]);
const pageSizeOption = [5, 10, 15, 20];
const pageQuery = reactive<ITchPageParams>({
  otherParams: {
    isResigned: '0',
    isAdmin: '',
    name: '',
    sex: '',
    workId: '',
  },
  pageParams: {
    pageNum: 1,
    pageSize: pageSizeOption[1],
    sortField: '',
    sortType: '',
  },
});

const openByAdd = async () => {
  await getPageInfo();
  isShowDrawer.value = true;
};

const onSelect = (row: ITch) => {
  chooseList.value = [row]
  // tableRef.value!.toggleRowSelection(row, true);
};

const onCancelSelect = () => {
  chooseList.value = []
}

const onClosed = () => {
  chooseList.value = []
};

const emit = defineEmits(['onSelectTch']);
const onConfirm = () => {
  if (!chooseList.value[0]) {
    ElMessage.error('请先选择教师');
    return;
  }
  emit('onSelectTch', chooseList.value);
  isShowDrawer.value = false;
};

//分页大小
const onSizeChange = (val: number) => {
  pageQuery.pageParams.pageSize = val;
  pageQuery.pageParams.pageNum = 1;
  getPageInfo();
};
//分页页码
const onCurrentChange = (val: number) => {
  pageQuery.pageParams.pageNum = val;
  getPageInfo();
};

const getPageInfo = async () => {
  const res = await api.teacher.findPage(pageQuery);
  tableData.value = res.data;
};

defineExpose({
  openByAdd,
});
</script>

<style lang="scss" scoped>
.drawer-header {
  font-size: 18px;
  color: var(--font-color);
}

.searchBox {
  &-item {
    margin-right: 10px;
  }

  :deep(.el-form-item) {
    margin-bottom: 0;
  }

  :deep(.el-card__body) {
    display: flex;
    justify-content: space-between;
  }

  section {
    display: flex;
  }

  :deep(.el-input__wrapper) {
    width: 200px;
  }
}

.mainBox {
  :deep(.el-checkbox__inner) {
    background-color: var(--main-color);
    transition: background 0.3s ease;
  }

  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: var(--active-color);
    transition: background 0.3s ease;
  }
}
</style>
